<div nz-row style="margin-left: -12px;margin-right: -12px;">
  <div nz-col [nzXl]="{ span: 4}" [nzMd]="{ span: 6}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'问题描述关键字'" [(ngModel)]="searchParams.values.description"
              class="ant_search"></nz-input>
  </div>
  <div nz-col [nzXl]="{ span: 2}" [nzMd]="{ span: 4}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <nz-select style="width: 100%" [nzPlaceHolder]="'选择职位类别'" nzAllowClear [(ngModel)]="searchParams.values.kind"
               [nzShowSearch]="true"
               class="ant_search">
      <nz-option
        *ngFor="let option of searchParams.params.kindList"
        [nzLabel]="option.kindName"
        [nzValue]="option.qkid"
        [nzDisabled]="option.disabled">
      </nz-option>
    </nz-select>
  </div>
  <div nz-col [nzXl]="{ span: 2}" [nzMd]="{ span: 4}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <nz-select style="width: 100%" [nzPlaceHolder]="'选择题目类别'" nzAllowClear [(ngModel)]="searchParams.values.level"
               [nzShowSearch]="true"
               class="ant_search">
      <nz-option
        *ngFor="let option of searchParams.params.levelList"
        [nzLabel]="option.label"
        [nzValue]="option.value"
        [nzDisabled]="option.disabled">
      </nz-option>
    </nz-select>
  </div>

  <div nz-col [nzXl]="{ span: 7}" [nzMd]="{ span: 8}" [nzSm]="{ span: 14}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <div class="filterItem">
      <div class="labelWrap">
        <span>Createtime</span>
      </div>
      <div class="item">
        <div nz-col [nzSpan]="12">
          <nz-datepicker (ngModelChange)="searchParams.values.startTime=$event;_startValueChange()"
                         [ngModel]="searchParams.values.startTime"
                         [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                         [nzPlaceHolder]="'Start date'"></nz-datepicker>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-datepicker (ngModelChange)="searchParams.values.endTime=$event;_endValueChange()"
                         [ngModel]="searchParams.values.endTime"
                         [nzShowTime]="true" [nzFormat]="'YYYY-MM-DD HH:mm:ss'"
                         [nzPlaceHolder]="'end date'"></nz-datepicker>
        </div>
      </div>
    </div>
  </div>
  <div nz-col [nzXl]="{ span: 9}" [nzMd]="{ span: 24}" [nzSm]="{ span: 24}"
       style="padding-left: 12px; padding-right: 12px; margin-bottom: 16px;">
    <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
      <div>
        <button nz-button [nzType]="'primary'" (click)="getData()">
          <span>Search</span>
        </button>
        <button nz-button [nzType]="'default'" (click)="clearSearchParams()">
          <span>Reset</span>
        </button>
      </div>
      <div>
        <button nz-button [nzType]="'default'" (click)="createOrUpdate()">
          <span>Create</span>
        </button>
      </div>
    </div>
  </div>
</div>

<app-table [gridView]="gridView" [tableData]="tableData"
           [total]="total"
           [(pageIndex)]="current"
           [pageSize]="pageSize"
           [loading]="loading"
           (refreshData)="getData($event)"></app-table>
